.mocklab-popup {
  width: 400px !important;
  maxWidth: 800px !important;

  @include breakpoint($small) {
    width: 600px !important;
  }

  .ui-dialog-titlebar {
    background: none !important;
    border: 0 !important;
  }
}

.mocklab-popup__title {
  margin-top: 0;
}

.mocklab-popup__confirm-button {
  border: 1px solid #ffaf0f !important;
	background: #FF9800 url("/images/ui-bg_inset-soft_30_FF9800_1x100.png") 50% 50% repeat-x  !important;

  .ui-button-text {
    font-weight: bold;
  }
}

.mocklab-callout {

  padding: 0.5rem;
  padding-left: 70px;
  margin-top: 1rem !important;
  margin-bottom: 2rem !important;
  background-color: #f9fcf5;
  border: 1px solid #666;
  border-radius: 4px;
  background-image: url("/images/mocklab_logo_transparent.png");
  background-size: 46px 46px;
  background-repeat: no-repeat;
  background-position: 2% 50%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  &__text {
    margin: 0 !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  &__learn-more-button {
    border: none !important;
    border-radius: 5px;
    background-color: #036334;
    color: white;
    padding: 0.5rem;
    outline: none;
    min-width: 6rem;
    max-height: 2.5rem;
    margin-top: auto;
    margin-bottom: auto;

    &:active,
    &:visited,
    &:hover {
      color: white;
      text-decoration: none;
    }
  }
}

.mocklab-cta {
  border: 3px solid $mocklab-dark-green !important;
  border-radius: 5px;
  color: white;
  text-align: center;
  padding: 0.2rem;
  outline: none;
  min-width: 6rem;
  max-height: 2.5rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 15px;

  &:active,
  &:visited,
  &:hover {
    color: white;
    text-decoration: none;
  }

  &--primary {
    background-color: $mocklab-dark-green;
  }

  &--secondary {
    color: $mocklab-dark-green;
    background-color: transparent;

    &:active,
    &:visited,
    &:hover {
      color: $mocklab-dark-green;
    }
  }
}